<template>
<el-container>
  <el-header style="height: 100%;border: 1px">
    <el-menu class="el-menu-demo" mode="horizontal" :router="true">
      <el-col :span="6" style="margin: 0px 43% 0px 10px ">
        <h2 style="font-size: 35px">:D豆嗲</h2>
      </el-col>
      <el-menu-item index="/homepage.html" style="padding: 40px 5px 62px 5px">首页</el-menu-item>
      <el-menu-item  style="padding: 40px 5px">/</el-menu-item>
      <el-menu-item index="/order.html" style="padding: 40px 5px 62px 5px">我的订单</el-menu-item>
      <el-menu-item  style="padding: 40px 5px">/</el-menu-item>
      <el-menu-item  style="padding: 40px 5px 62px 5px" @click="logout">注销</el-menu-item>
    </el-menu>
  </el-header>

  <el-row style="margin: 20px 0px 0px 170px;">
    <el-card style="position: relative;left: -11%;margin: 20px 0px 0px 170px;">
      <el-form ref="goods" :rules="rules" label-width="80px" :model="goods">
        <el-form-item label="ID" v-show="false">
          <el-input v-model="goods.id"></el-input>
        </el-form-item>
        <el-form-item label="商品名称" prop="goodname">
          <el-input v-model="goods.goodname" ></el-input>
        </el-form-item>

        <el-form-item  label="商品图片" prop="imghref">
            <img  :src="goods.imghref" alt="" style="width: 200px;height: 200px" >
        </el-form-item>

        <el-form-item label="商品图片" prop="imghref">
          <img v-if="goods.length > 0"  :src="goods.imghref" alt="" style="width: 200px;height: 200px" >
          <el-input v-else v-model="goods.imghref" ></el-input>
        </el-form-item>

        <el-form-item label="单价" prop="price">
          <el-input type="number" v-model.trim="goods.price"></el-input>
        </el-form-item>
        <el-form-item label="尺寸" prop="size">
          <el-input v-model.trim="goods.size"></el-input>
        </el-form-item>
        <el-form-item label="库存" prop="num">
          <el-input type="number" v-model.trim="goods.num"></el-input>
        </el-form-item>
        <el-form-item style="text-align: center">
          <el-button type="primary" @click="onSubmit">保存</el-button>
          <el-button @click="onReset">重置</el-button>
          <el-button @click="$router.back()">返回</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </el-row>

  <br><br>

  <el-footer  style="padding:0px 0px 350px 0px">
    <el-row>
      <img width="35px" height="35px" style="margin: 50px 0px 0px -60%" src="../img/many.png">
      <h1 style="color: white;margin: -70px 42% 0px 0px ">品类齐全，轻松购物</h1>
      <el-col :span="2" style="margin: -50px 0px 0px 37% ">
        <img width="35px" height="35px" src="../img/fast.png">
      </el-col>
      <h1 style="color: white;margin: -60px 0% 0px 0px">多仓直发，极速配送</h1>
      <el-col :span="2" style="margin: -53px 0px 0px 200px ">
        <img width="33px" height="33px" src="../img/good.png">
      </el-col>
      <h1 style="color: white;margin: -60px 0px 0px 40%">正品好货，精致服务</h1>
    </el-row>
    <el-divider></el-divider>
    <img width="50px" height="50px" src="../img/touxiang.png">
    <el-breadcrumb>
      <el-breadcrumb-item style="font-size: 18px;margin-left: 30px">关于我们</el-breadcrumb-item>
      <el-breadcrumb-item style="font-size: 18px">联系我们</el-breadcrumb-item>
      <el-breadcrumb-item style="font-size: 18px">人才招聘</el-breadcrumb-item>
      <el-breadcrumb-item style="font-size: 18px">商家入驻</el-breadcrumb-item>
      <el-breadcrumb-item style="font-size: 18px">广告服务</el-breadcrumb-item>
      <el-breadcrumb-item style="font-size: 18px">手机京东</el-breadcrumb-item>
      <el-breadcrumb-item style="font-size: 18px">友情链接</el-breadcrumb-item>
      <el-breadcrumb-item style="font-size: 18px">销售联盟</el-breadcrumb-item>
    </el-breadcrumb>
    <h1 style="color: #8a8a8a;font-size: 15px;margin: 0px 20px 0px 0px">Copyright &copy; 2021 豆嗲:D.com版权所有</h1>
  </el-footer>

</el-container>
</template>

<script>
import loginApi from "@/http/loginApi";
import goodsBystoreApi from "@/http/goodsBystoreApi"

export default {
name: "StoreAdmin",
  data(){
   return{
     dialogImageUrl: '',
     dialogVisible: false,
     disabled: false,
     searchForm: "",
     goods:{},
     pager: {
       pagerNum: 1,
       pageSize: 10
     },
     batchIds: [],
     rules: {
       goodname: [
         {required: true, message: '请输入商品名字', trigger: 'blur'},
         {min: 1, max: 50, message: '商品名不能为空哦', trigger: 'blur'}
       ],
       price: [
         {required: true, message: '请输入价格', trigger: 'blur'},
       ],
       num: [
         {required: true, message: '请输入库存', trigger: 'blur'},
       ],
       role: [
         {required: true, message: '请选择商品状态', trigger: 'change'},
       ]
     }
   }
  },
  created() {
    //当vue实例创建成功时
    this.getEditObj();
  },
  methods:{
    logout(){
      loginApi.logout().then(res => {
        if (res.data.code == 200) {
          this.$message.info(res.data.msg);
          sessionStorage.clear();
          this.$router.replace("/login.html");
        }
      })
  },
    getList(){
      goodsBystoreApi.getListByPage(this.searchForm, {
        pageNum: this.pager.pageNum,
        pageSize: this.pager.pageSize
      }).then(res =>{
        console.log(res);
        if (res.data.code == 200){
          this.pager = res.data.data
          this.goods = this.pager.data
        }
      })
    },
    handleSizeChange(val){
      this.pager.pageSize = val
      this.getList();
    },
    handleCurrentChange(val){
      this.pager.pageNum = val
      this.getList();
    },
    handleSelectionChange(val) {
      console.log(val);
      this.batchIds = [];
      val.forEach(item => this.batchIds.push(item.id));
    },
    handleEdit(row) {
      console.log(row);
      this.$router.push(`/store/toEdit/${row.id}.html`)
    },
    getEditObj() {
      let id = this.$route.params.id;
      if (id) {
        goodsBystoreApi.edit(id).then(res => {
          if (res.data.code == 200) {
            this.goods = res.data.data;
          }
        })
      }
    },
    onReset() {
      this.$refs["goods"].resetFields();
    },
    onSubmit() {
      this.$refs['goods'].validate((valid) => {
        if (valid) {
          console.log('submit!', this.goods);
          goodsBystoreApi.save(this.goods).then((res) => {
            console.log(res)
            if (res.data.code == 200) {
              this.$router.replace("/storeAdmin.html")
            } else {
              this.$message({
                showClose: true,
                message: res.data.msg,
                type: 'error'
              });
            }
          })
        } else {
          console.log('error submit!!');
          return false;//阻止表单提交
        }
      });
    },
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    }
  }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>